<template>
    <div>
        <div class="head">
            <div class="sousuo">
                <input type="text" placeholder="搜索">
                <div class="sou">搜索</div>
            </div>
            <div class="shuiguo">
                <ul>
                    <li><img src="../img/3.jpg" alt=""><span>时令水果</span></li>
                    <li><img src="../img/4.jpg" alt="">新鲜蔬菜</li>
                    <li><img src="../img/5.jpg" alt="">海鲜水产</li>
                    <li><img src="../img/6.jpg" alt="">肉禽蛋品</li>
                    <li><img src="../img/7.jpg" alt="">食品干货</li>
                    <li><img src="../img/8.jpg" alt="">美妆个护</li>
                    <li><img src="../img/9.jpg" alt="">母婴百货</li>
                    <li><img src="../img/10.jpg" alt="">保健滋补</li>
                    <!-- <li><img src="../img/11.jpg" alt=""></li>
                    <li><img src="../img/13.jpg" alt=""></li> -->
                </ul>
            </div>

        </div>
        <div class="foot">
            <ul>
                <li>
                    <router-link to="/fabu">发布</router-link>
                </li>
                <li>
                    <router-link to="/gouwuche">购物车</router-link>
                </li>
                <li>
                    <router-link to="/shouye">首页</router-link>
                </li>
                <li>
                    <router-link to="/wode">我的</router-link>
                </li>

            </ul>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
div {

    .head {

        //display: flex;
        .sousuo {
            width: 100%;
            height: 100%;
            background-color: aqua;
            display: flex;
            position: relative;
            margin: 0 auto;

            input {
                width: 200px;
                height: 20px;
            }

            .sou {
                width: 40px;
                height: 20px;
                border-radius: 10px;
                background-color: orangered;
                position: absolute;
                left: 165px;
                top: 2px;
                text-align: center;
                line-height: 20px;
            }
        }

        .shuiguo {
            //display: flex;
            //justify-content: center;
            //align-items: center;
            width: 90%;
            height: 300px;
            margin-top: 10px;
            background-color: cornflowerblue;

            ul {
                width: 80%;
                height: 300px;
                display: flex;
                flex-wrap: wrap;

                li {
                    
                    list-style: none;
                    img {
                        width: 50px;
                        height: 50px;
                        background-size: 100% 100%;
                        margin: 2px;
                    }
                }
            }
        }




    }
    .foot {
        ul {
            display: flex;
            li {
                list-style: none;
                margin: 3px;
            }
        }
    }



}
</style>